<template>
  <div class="wy_logo">
    <Header title="Login" go-back="true"></Header>
    <div class="login_box">
      <div class="login_image">
        <img src="../../assets/Image/wylogo.png" alt="">
      </div>
      <div class="login_input">
        <div class="input1">
          <input type="tel" v-model="phoneNum" placeholder="输入电话号码">
        </div>
        <div class="input2">
          <input type="password" v-model="password" placeholder="输入密码">
        </div>
        <div class="btn">
          <button @click="loginBtn">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../Header/Header'
import {getLogin} from '../../api/node'
import {Toast} from 'mint-ui'
import {saveUserId, saveAvatarUrl, saveNickName} from '../../api/storage'

export default {
  name: 'Login',
  data () {
    return {
      phoneNum: '',
      password: '',
      nickName: '',
      avatarUrl: '',
      userId: ''
    }
  },
  methods: {
    loginBtn () {
      getLogin(this.phoneNum, this.password).then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.nickName = res.profile.nickname
          this.avatarUrl = res.profile.avatarUrl
          this.userId = res.profile.userId
          saveAvatarUrl(this.avatarUrl)
          saveNickName(this.nickName)
          saveUserId(this.userId)
          Toast({
            message: '登录成功',
            position: 'middle',
            duration: 1500
          })
          this.$router.push(`/PageOne`)
        }
      })
    }
  },
  components: {
    Header
  }
}
</script>

<style lang="scss" scoped>
.wy_logo{
  width: 100%;
  padding-top: 50px;
  .login_box{
    width: 100%;
    padding-top: 20px;
    .login_image{
      text-align: center;
      img{
        width: 100px;
      }
    }
    .login_input{
      width: 100%;
      text-align: center;
      .input1{
        padding-bottom: 20px;
      }
      input{
        width: 200px;
        height: 40px;
        border:1px solid #e11424;
        border-radius: 5px;
        outline: none;
        padding-left: 10px;
        font-size: 15px;
      }
      .btn{
        padding-top: 20px;
        button{
          width: 200px;
          height: 40px;
          background: #e11424;
          color: #fff;
          font-size: 15px;
          outline: none;
          border: none;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
